<template>
    <fieldset>
        <legend>过渡动画</legend>
        <button @click="state">点击</button>
        <transition enter-active-class="animate__animated animate__backInRight" leave-active-class="animate__animated animate__rubberBand">
            <div id="dv" v-if="flag"></div>
        </transition>
    </fieldset>
</template>
<script>    
    //在vue中触发动画的方式
    //1.使用v-if
    //2.使用v-show
    //3.动态组件切换

    import "animate.css"

    export default {
        data(){
            return {
                flag: true
            }
        },
        methods:{
            state(){
                this.flag = !this.flag
            }
        }
    }
</script>
<style scoped>
    #dv{
        width:100px;
        height:100px;
        background: skyblue;
    }
    /* .v-enter,.v-leave-to{
        opacity: 0;
        transform: translateX(0);
    }
    .v-enter-to,.v-leave{
        opacity: 1;
        transform: translateX(500px);
    }
    .v-enter-active,.v-leave-active{
        transition: all 1s;
    } */
</style>